<!DOCTYPE HTML>
<html lang="">
<head>
	<meta charset="UTF-8">
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<title>Bubble · GitBook</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="description" content="">
	<meta name="generator" content="GitBook 3.2.2">
	<meta name="author" content="chartjs">


	<link rel="stylesheet" href="../gitbook/style.css">


	<link rel="stylesheet" href="../gitbook/gitbook-plugin-search-plus/search.css">


	<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">


	<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">


	<link rel="stylesheet" href="../style.css">


	<meta name="HandheldFriendly" content="true"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="apple-touch-icon-precomposed" sizes="152x152"
	      href="../gitbook/images/apple-touch-icon-precomposed-152.png">
	<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">


	<link rel="next" href="scatter.html"/>


	<link rel="prev" href="polar.html"/>


	<link rel="stylesheet" href="../gitbook/gitbook-plugin-chartjs/style.css">
	<script src="../gitbook/gitbook-plugin-chartjs/Chart.bundle.js"></script>
	<script src="../gitbook/gitbook-plugin-chartjs/chartjs-plugin-deferred.js"></script>


</head>
<body>

	<div class="book">
		<div class="book-summary">


			<div id="book-search-input" role="search">
				<input type="text" placeholder="Type to search"/>
			</div>


			<nav role="navigation">


				<ul class="summary">


					<li class="chapter " data-level="1.1" data-path="../">

						<a href="../">


							Chart.js

						</a>


					</li>

					<li class="chapter " data-level="1.2" data-path="../getting-started/">

						<a href="../getting-started/">


							Getting Started

						</a>


						<ul class="articles">


							<li class="chapter " data-level="1.2.1" data-path="../getting-started/installation.html">

								<a href="../getting-started/installation.html">


									Installation

								</a>


							</li>

							<li class="chapter " data-level="1.2.2" data-path="../getting-started/integration.html">

								<a href="../getting-started/integration.html">


									Integration

								</a>


							</li>

							<li class="chapter " data-level="1.2.3" data-path="../getting-started/usage.html">

								<a href="../getting-started/usage.html">


									Usage

								</a>


							</li>


						</ul>

					</li>

					<li class="chapter " data-level="1.3" data-path="../general/">

						<a href="../general/">


							General

						</a>


						<ul class="articles">


							<li class="chapter " data-level="1.3.1" data-path="../general/responsive.html">

								<a href="../general/responsive.html">


									Responsive

								</a>


							</li>

							<li class="chapter " data-level="1.3.2" data-path="../general/interactions/">

								<a href="../general/interactions/">


									Interactions

								</a>


								<ul class="articles">


									<li class="chapter " data-level="1.3.2.1"
									    data-path="../general/interactions/events.html">

										<a href="../general/interactions/events.html">


											Events

										</a>


									</li>

									<li class="chapter " data-level="1.3.2.2"
									    data-path="../general/interactions/modes.html">

										<a href="../general/interactions/modes.html">


											Modes

										</a>


									</li>


								</ul>

							</li>

							<li class="chapter " data-level="1.3.3" data-path="../general/options.html">

								<a href="../general/options.html">


									Options

								</a>


							</li>

							<li class="chapter " data-level="1.3.4" data-path="../general/colors.html">

								<a href="../general/colors.html">


									Colors

								</a>


							</li>

							<li class="chapter " data-level="1.3.5" data-path="../general/fonts.html">

								<a href="../general/fonts.html">


									Fonts

								</a>


							</li>


						</ul>

					</li>

					<li class="chapter " data-level="1.4" data-path="../configuration/">

						<a href="../configuration/">


							Configuration

						</a>


						<ul class="articles">


							<li class="chapter " data-level="1.4.1" data-path="../configuration/animations.html">

								<a href="../configuration/animations.html">


									Animations

								</a>


							</li>

							<li class="chapter " data-level="1.4.2" data-path="../configuration/layout.html">

								<a href="../configuration/layout.html">


									Layout

								</a>


							</li>

							<li class="chapter " data-level="1.4.3" data-path="../configuration/legend.html">

								<a href="../configuration/legend.html">


									Legend

								</a>


							</li>

							<li class="chapter " data-level="1.4.4" data-path="../configuration/title.html">

								<a href="../configuration/title.html">


									Title

								</a>


							</li>

							<li class="chapter " data-level="1.4.5" data-path="../configuration/tooltip.html">

								<a href="../configuration/tooltip.html">


									Tooltip

								</a>


							</li>

							<li class="chapter " data-level="1.4.6" data-path="../configuration/elements.html">

								<a href="../configuration/elements.html">


									Elements

								</a>


							</li>


						</ul>

					</li>

					<li class="chapter " data-level="1.5" data-path="./">

						<a href="./">


							Charts

						</a>


						<ul class="articles">


							<li class="chapter " data-level="1.5.1" data-path="line.html">

								<a href="line.html">


									Line

								</a>


							</li>

							<li class="chapter " data-level="1.5.2" data-path="bar.html">

								<a href="bar.html">


									Bar

								</a>


							</li>

							<li class="chapter " data-level="1.5.3" data-path="radar.html">

								<a href="radar.html">


									Radar

								</a>


							</li>

							<li class="chapter " data-level="1.5.4" data-path="doughnut.html">

								<a href="doughnut.html">


									Doughnut & Pie

								</a>


							</li>

							<li class="chapter " data-level="1.5.5" data-path="polar.html">

								<a href="polar.html">


									Polar Area

								</a>


							</li>

							<li class="chapter active" data-level="1.5.6" data-path="bubble.html">

								<a href="bubble.html">


									Bubble

								</a>


							</li>

							<li class="chapter " data-level="1.5.7" data-path="scatter.html">

								<a href="scatter.html">


									Scatter

								</a>


							</li>

							<li class="chapter " data-level="1.5.8" data-path="area.html">

								<a href="area.html">


									Area

								</a>


							</li>

							<li class="chapter " data-level="1.5.9" data-path="mixed.html">

								<a href="mixed.html">


									Mixed

								</a>


							</li>


						</ul>

					</li>

					<li class="chapter " data-level="1.6" data-path="../axes/">

						<a href="../axes/">


							Axes

						</a>


						<ul class="articles">


							<li class="chapter " data-level="1.6.1" data-path="../axes/cartesian/">

								<a href="../axes/cartesian/">


									Cartesian

								</a>


								<ul class="articles">


									<li class="chapter " data-level="1.6.1.1"
									    data-path="../axes/cartesian/category.html">

										<a href="../axes/cartesian/category.html">


											Category

										</a>


									</li>

									<li class="chapter " data-level="1.6.1.2" data-path="../axes/cartesian/linear.html">

										<a href="../axes/cartesian/linear.html">


											Linear

										</a>


									</li>

									<li class="chapter " data-level="1.6.1.3"
									    data-path="../axes/cartesian/logarithmic.html">

										<a href="../axes/cartesian/logarithmic.html">


											Logarithmic

										</a>


									</li>

									<li class="chapter " data-level="1.6.1.4" data-path="../axes/cartesian/time.html">

										<a href="../axes/cartesian/time.html">


											Time

										</a>


									</li>


								</ul>

							</li>

							<li class="chapter " data-level="1.6.2" data-path="../axes/radial/">

								<a href="../axes/radial/">


									Radial

								</a>


								<ul class="articles">


									<li class="chapter " data-level="1.6.2.1" data-path="../axes/radial/linear.html">

										<a href="../axes/radial/linear.html">


											Linear

										</a>


									</li>


								</ul>

							</li>

							<li class="chapter " data-level="1.6.3" data-path="../axes/labelling.html">

								<a href="../axes/labelling.html">


									Labelling

								</a>


							</li>

							<li class="chapter " data-level="1.6.4" data-path="../axes/styling.html">

								<a href="../axes/styling.html">


									Styling

								</a>


							</li>


						</ul>

					</li>

					<li class="chapter " data-level="1.7" data-path="../developers/">

						<a href="../developers/">


							Developers

						</a>


						<ul class="articles">


							<li class="chapter " data-level="1.7.1" data-path="../developers/api.html">

								<a href="../developers/api.html">


									Chart.js API

								</a>


							</li>

							<li class="chapter " data-level="1.7.2" data-path="../developers/updates.html">

								<a href="../developers/updates.html">


									Updating Charts

								</a>


							</li>

							<li class="chapter " data-level="1.7.3" data-path="../developers/plugins.html">

								<a href="../developers/plugins.html">


									Plugins

								</a>


							</li>

							<li class="chapter " data-level="1.7.4" data-path="../developers/charts.html">

								<a href="../developers/charts.html">


									New Charts

								</a>


							</li>

							<li class="chapter " data-level="1.7.5" data-path="../developers/axes.html">

								<a href="../developers/axes.html">


									New Axes

								</a>


							</li>

							<li class="chapter " data-level="1.7.6" data-path="../developers/contributing.html">

								<a href="../developers/contributing.html">


									Contributing

								</a>


							</li>


						</ul>

					</li>

					<li class="chapter " data-level="1.8" data-path="../notes/">

						<a href="../notes/">


							Additional Notes

						</a>


						<ul class="articles">


							<li class="chapter " data-level="1.8.1" data-path="../notes/comparison.html">

								<a href="../notes/comparison.html">


									Comparison Table

								</a>


							</li>

							<li class="chapter " data-level="1.8.2" data-path="../notes/extensions.html">

								<a href="../notes/extensions.html">


									Popular Extensions

								</a>


							</li>

							<li class="chapter " data-level="1.8.3" data-path="../notes/license.html">

								<a href="../notes/license.html">


									License

								</a>


							</li>


						</ul>

					</li>


					<li class="divider"></li>

					<li>
						<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
							Published with GitBook
						</a>
					</li>
				</ul>


			</nav>


		</div>

		<div class="book-body">

			<div class="body-inner">


				<div class="book-header" role="navigation">


					<!-- Title -->
					<h1>
						<i class="fa fa-circle-o-notch fa-spin"></i>
						<a href="..">Bubble</a>
					</h1>
				</div>


				<div class="page-wrapper" tabindex="-1" role="main">
					<div class="page-inner">

						<div class="search-plus" id="book-search-results">
							<div class="search-noresults">

								<section class="normal markdown-section">

									<h1 id="bubble-chart">Bubble Chart</h1>
									<p>A bubble chart is used to display three dimensions of data at the same time. The
										location of the bubble is determined by the first two dimensions and the
										corresponding horizontal and vertical axes. The third dimension is represented
										by the size of the individual bubbles.</p>
									<p>
									<div class="chartjs-wrapper">
										<canvas id="chartjs-6" class="chartjs" width="undefined"
										        height="undefined"></canvas>
										<script>new Chart(document.getElementById("chartjs-6"), {
											"type": "bubble",
											"data": {
												"datasets": [{
													"label": "First Dataset",
													"data": [{"x": 20, "y": 30, "r": 15}, {"x": 40, "y": 10, "r": 10}],
													"backgroundColor": "rgb(255, 99, 132)"
												}]
											}
										});</script>
									</div>
									</p>
									<h2 id="example-usage">Example Usage</h2>
									<pre><code class="lang-javascript"><span
										class="hljs-comment">// For a bubble chart</span>
<span class="hljs-keyword">var</span> myBubbleChart = <span class="hljs-keyword">new</span> Chart(ctx,{
    type: <span class="hljs-string">&apos;bubble&apos;</span>,
    data: data,
    options: options
});
</code></pre>
									<h2 id="dataset-properties">Dataset Properties</h2>
									<p>The bubble chart allows a number of properties to be specified for each dataset.
										These are used to set display properties for a specific dataset. For example,
										the colour of the bubbles is generally set this way.</p>
									<table>
										<thead>
											<tr>
												<th>Name</th>
												<th>Type</th>
												<th style="text-align:center"><a
													href="../general/options.html#scriptable-options">Scriptable</a>
												</th>
												<th style="text-align:center"><a
													href="../general/options.html#indexable-options">Indexable</a></th>
												<th>Default</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><a href="#styling"><code>backgroundColor</code></a></td>
												<td><a href="../general/colors.html"><code>Color</code></a></td>
												<td style="text-align:center">Yes</td>
												<td style="text-align:center">Yes</td>
												<td><code>&apos;rgba(0,0,0,0.1)&apos;</code></td>
											</tr>
											<tr>
												<td><a href="#styling"><code>borderColor</code></a></td>
												<td><a href="../general/colors.html"><code>Color</code></a></td>
												<td style="text-align:center">Yes</td>
												<td style="text-align:center">Yes</td>
												<td><code>&apos;rgba(0,0,0,0.1)&apos;</code></td>
											</tr>
											<tr>
												<td><a href="#styling"><code>borderWidth</code></a></td>
												<td><code>Number</code></td>
												<td style="text-align:center">Yes</td>
												<td style="text-align:center">Yes</td>
												<td><code>3</code></td>
											</tr>
											<tr>
												<td><a href="#data-structure"><code>data</code></a></td>
												<td><code>Object[]</code></td>
												<td style="text-align:center">-</td>
												<td style="text-align:center">-</td>
												<td><strong>required</strong></td>
											</tr>
											<tr>
												<td><a href="#interactions"><code>hoverBackgroundColor</code></a></td>
												<td><a href="../general/colors.html"><code>Color</code></a></td>
												<td style="text-align:center">Yes</td>
												<td style="text-align:center">Yes</td>
												<td><code>undefined</code></td>
											</tr>
											<tr>
												<td><a href="#interactions"><code>hoverBorderColor</code></a></td>
												<td><a href="../general/colors.html"><code>Color</code></a></td>
												<td style="text-align:center">Yes</td>
												<td style="text-align:center">Yes</td>
												<td><code>undefined</code></td>
											</tr>
											<tr>
												<td><a href="#interactions"><code>hoverBorderWidth</code></a></td>
												<td><code>Number</code></td>
												<td style="text-align:center">Yes</td>
												<td style="text-align:center">Yes</td>
												<td><code>1</code></td>
											</tr>
											<tr>
												<td><a href="#interactions"><code>hoverRadius</code></a></td>
												<td><code>Number</code></td>
												<td style="text-align:center">Yes</td>
												<td style="text-align:center">Yes</td>
												<td><code>4</code></td>
											</tr>
											<tr>
												<td><a href="#interactions"><code>hitRadius</code></a></td>
												<td><code>Number</code></td>
												<td style="text-align:center">Yes</td>
												<td style="text-align:center">Yes</td>
												<td><code>1</code></td>
											</tr>
											<tr>
												<td><a href="#labeling"><code>label</code></a></td>
												<td><code>String</code></td>
												<td style="text-align:center">-</td>
												<td style="text-align:center">-</td>
												<td><code>undefined</code></td>
											</tr>
											<tr>
												<td><a href="#styling"><code>pointStyle</code></a></td>
												<td><code>String</code></td>
												<td style="text-align:center">Yes</td>
												<td style="text-align:center">Yes</td>
												<td><code>circle</code></td>
											</tr>
											<tr>
												<td><a href="#styling"><code>radius</code></a></td>
												<td><code>Number</code></td>
												<td style="text-align:center">Yes</td>
												<td style="text-align:center">Yes</td>
												<td><code>3</code></td>
											</tr>
										</tbody>
									</table>
									<h3 id="labeling">Labeling</h3>
									<p><code>label</code> defines the text associated to the dataset and which appears
										in the legend and tooltips.</p>
									<h3 id="styling">Styling</h3>
									<p>The style of each bubble can be controlled with the following properties:</p>
									<table>
										<thead>
											<tr>
												<th>Name</th>
												<th>Description</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><code>backgroundColor</code></td>
												<td>bubble background color</td>
											</tr>
											<tr>
												<td><code>borderColor</code></td>
												<td>bubble border color</td>
											</tr>
											<tr>
												<td><code>borderWidth</code></td>
												<td>bubble border width (in pixels)</td>
											</tr>
											<tr>
												<td><code>pointStyle</code></td>
												<td>bubble <a href="../configuration/elements#point-styles">shape
													style</a></td>
											</tr>
											<tr>
												<td><code>radius</code></td>
												<td>bubble radius (in pixels)</td>
											</tr>
										</tbody>
									</table>
									<p>All these values, if <code>undefined</code>, fallback to the associated <a
										href="../configuration/elements.html#point-configuration"><code>elements.point.*</code></a>
										options.</p>
									<h3 id="interactions">Interactions</h3>
									<p>The interaction with each bubble can be controlled with the following
										properties:</p>
									<table>
										<thead>
											<tr>
												<th>Name</th>
												<th>Description</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><code>hoverBackgroundColor</code></td>
												<td>bubble background color when hovered</td>
											</tr>
											<tr>
												<td><code>hoverBorderColor</code></td>
												<td>bubble border color hovered</td>
											</tr>
											<tr>
												<td><code>hoverBorderWidth</code></td>
												<td>bubble border width when hovered (in pixels)</td>
											</tr>
											<tr>
												<td><code>hoverRadius</code></td>
												<td>bubble <strong>additional</strong> radius when hovered (in pixels)
												</td>
											</tr>
											<tr>
												<td><code>hitRadius</code></td>
												<td>bubble <strong>additional</strong> radius for hit detection (in
													pixels)
												</td>
											</tr>
										</tbody>
									</table>
									<p>All these values, if <code>undefined</code>, fallback to the associated <a
										href="../configuration/elements.html#point-configuration"><code>elements.point.*</code></a>
										options.</p>
									<h2 id="default-options">Default Options</h2>
									<p>We can also change the default values for the Bubble chart type. Doing so will
										give all bubble charts created after this point the new defaults. The default
										configuration for the bubble chart can be accessed at <code>Chart.defaults.bubble</code>.
									</p>
									<h2 id="data-structure">Data Structure</h2>
									<p>Bubble chart datasets need to contain a <code>data</code> array of points, each
										points represented by an object containing the following properties:</p>
									<pre><code class="lang-javascript">{
    <span class="hljs-comment">// X Value</span>
    x: &lt;Number&gt;,

    // Y Value
    y: &lt;Number&gt;,

    // Bubble radius in pixels (not scaled).
    r: &lt;Number&gt;
}
</code></pre>
									<p><strong>Important:</strong> the radius property, <code>r</code> is
										<strong>not</strong> scaled by the chart, it is the raw radius in pixels of the
										bubble that is drawn on the canvas.</p>


								</section>

							</div>
							<div class="search-results">
								<div class="has-results">

									<h1 class="search-results-title"><span class='search-results-count'></span> results
										matching "<span class='search-query'></span>"</h1>
									<ul class="search-results-list"></ul>

								</div>
								<div class="no-results">

									<h1 class="search-results-title">No results matching "<span
										class='search-query'></span>"</h1>

								</div>
							</div>
						</div>

					</div>
				</div>

			</div>


			<a href="polar.html" class="navigation navigation-prev " aria-label="Previous page: Polar Area">
				<i class="fa fa-angle-left"></i>
			</a>


			<a href="scatter.html" class="navigation navigation-next " aria-label="Next page: Scatter">
				<i class="fa fa-angle-right"></i>
			</a>


		</div>

		<script>
			var gitbook = gitbook || [];
			gitbook.push(function () {
				gitbook.page.hasChanged({
					"page": {
						"title": "Bubble",
						"level": "1.5.6",
						"depth": 2,
						"next": {
							"title": "Scatter",
							"level": "1.5.7",
							"depth": 2,
							"path": "charts/scatter.md",
							"ref": "charts/scatter.md",
							"articles": []
						},
						"previous": {
							"title": "Polar Area",
							"level": "1.5.5",
							"depth": 2,
							"path": "charts/polar.md",
							"ref": "charts/polar.md",
							"articles": []
						},
						"dir": "ltr"
					},
					"config": {
						"plugins": ["-lunr", "-search", "search-plus", "anchorjs", "chartjs", "ga"],
						"root": "./docs",
						"styles": {
							"website": "style.css",
							"pdf": "styles/pdf.css",
							"epub": "styles/epub.css",
							"mobi": "styles/mobi.css",
							"ebook": "styles/ebook.css",
							"print": "styles/print.css"
						},
						"pluginsConfig": {
							"anchorjs": {"icon": "#", "placement": "left", "visible": "always"},
							"ga": {"configuration": "auto", "token": "UA-28909194-3"},
							"theme-default": {
								"styles": {
									"website": "style.css",
									"pdf": "styles/pdf.css",
									"epub": "styles/epub.css",
									"mobi": "styles/mobi.css",
									"ebook": "styles/ebook.css",
									"print": "styles/print.css"
								}, "showLevel": false
							},
							"search-plus": {},
							"chartjs": {"defaults": null},
							"highlight": {},
							"sharing": {
								"facebook": true,
								"twitter": true,
								"google": false,
								"weibo": false,
								"instapaper": false,
								"vk": false,
								"all": ["facebook", "google", "twitter", "weibo", "instapaper"]
							},
							"fontsettings": {"theme": "white", "family": "sans", "size": 2}
						},
						"theme": "default",
						"author": "chartjs",
						"pdf": {
							"pageNumbers": true,
							"fontSize": 12,
							"fontFamily": "Arial",
							"paperSize": "a4",
							"chapterMark": "pagebreak",
							"pageBreaksBefore": "/",
							"margin": {"right": 62, "left": 62, "top": 56, "bottom": 56}
						},
						"structure": {
							"langs": "LANGS.md",
							"readme": "README.md",
							"glossary": "GLOSSARY.md",
							"summary": "SUMMARY.md"
						},
						"variables": {},
						"gitbook": "3.2.2"
					},
					"file": {"path": "charts/bubble.md", "mtime": "2017-10-28T15:03:49.266Z", "type": "markdown"},
					"gitbook": {"version": "3.2.2", "time": "2017-10-28T15:09:53.587Z"},
					"basePath": "..",
					"book": {"language": ""}
				});
			});
		</script>
	</div>


	<script src="../gitbook/gitbook.js"></script>
	<script src="../gitbook/theme.js"></script>


	<script src="../gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>


	<script src="../gitbook/gitbook-plugin-search-plus/search.js"></script>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.1.1/anchor.min.js"></script>


	<script src="../gitbook/gitbook-plugin-anchorjs/anchor-style.js"></script>


	<script src="../gitbook/gitbook-plugin-ga/plugin.js"></script>


	<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>


	<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>


</body>
</html>

